<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <el-tabs v-model="currTab" @tab-click="handleClick">
        <el-tab-pane label="账号详情" name="0"></el-tab-pane>
        <el-tab-pane label="修改密码" name="1"></el-tab-pane>
      </el-tabs>
      <el-row v-if="currTab == 0" type="flex" justify="center">
        <el-form size="small" label-width="200px">
          <el-form-item label="账号ID：">
            <el-input v-model="formData.org_name" readonly />
          </el-form-item>
          <el-form-item label="机构名称：">
            <el-input v-model="formData.org_name" readonly />
          </el-form-item>
          <el-form-item label="母线编号：">
            <el-input v-model="formData.a" readonly />
          </el-form-item>
          <el-form-item label="数字身份：">
            <el-input v-model="formData.did" readonly />
          </el-form-item>
          <el-form-item label="机构角色：">
            <el-input v-model="formData._type" readonly />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="formData.phone" readonly />
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input v-model="formData.a" readonly />
          </el-form-item>
          <el-form-item label="账号状态：">
            <el-input v-model="formData.a" readonly />
          </el-form-item>
          <el-form-item label="信誉值：">
            <el-input v-model="formData.a" readonly />
          </el-form-item>
          <el-form-item label="注册时间：">
            <el-input v-model="formData.time" readonly />
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-else-if="currTab == 1" type="flex" justify="center">
        <ResetPasswd :phone="formData.phone"/>
        <!-- <el-form
          size="small"
          label-width="200px"
          :model="setPassForm" 
          :rules="rules"
          ref="formss"
        >
          <el-form-item label="原密码：" prop="oldpass">
            <el-input type="text" v-model="setPassForm.oldpass" />
          </el-form-item>
          <el-form-item label="新密码：" prop="newpass">
            <el-input type="password" v-model="setPassForm.newpass" />
          </el-form-item>
          <el-form-item label="确认新密码：" prop="newpassConfirg">
            <el-input type="password" v-model="setPassForm.newpassConfirg" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ResetPasswd">确定</el-button>
          </el-form-item>
        </el-form> -->
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import ResetPasswd from "./common/resetPasswd.vue";

@Component({
  components: {
    BaseSlot,
    ResetPasswd
  },
})
export default class MyApplication extends Vue {
  protected currTab: any = 0;
  protected formData: any = {
    roles: {},
  };

  protected created() {
    this.init();
  }

  protected async init() {
    const result: any = await this.$api.getAaccounts().then((res: any) => {
      this.$set(this, "formData", res.data);
      this.$set(this.formData, 'time', Vue.prototype.$fmtDate(this.formData.created_at));
      switch (this.formData.type) {
        case "consumer":
          // this.formData._type =
          this.$set(this.formData, "_type", "购电方");
          break;
        case "prosumer":
          this.$set(this.formData, "_type", "产销者");
          break;
        case "grid":
          this.$set(this.formData, "_type", "电网机构");
          break;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.cardBox {
  min-height: 70vh;
  .el-input {
    width: 20vw;
  }
}
</style>


